昨天有講到怎麼利用vue-router來設定路由了，

在開始切版之前，還需要先導入Vuetify套件

在 Day 9的時候，

有順便安裝Vuetify了，但是後來發現 vue add vuetify 是 vue-cli的安裝法

這邊要改成用 Webpack的方式來安裝

先來看這篇 Vuetify的官方安裝教學，需要先添加幾個依賴

yarn add vuetify
# 或
npm install vuetify

yarn add sass@~1.32 sass-loader deepmerge -D
# OR
npm install sass@~1.32 sass-loader deepmerge -D

執行完後，找一下webpack.config.js檔，貼上這段

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

BUT ! ! 我找了一下 沒看到 webpack.config.js 這個檔案

我在估狗找了一下發現這篇，原因如下：

• 開發者一般不需要知道 webpack 做了什麼，所以沒有把 wepback 的配置文件建立出來，
• 在 Vue 專案中，vue.config.js 就等同於 Webpack 的webpack.config.js，
• 那在vue-cli 3之後創建專案時，不會自動創建 vue.config.js，所以有需要修改的話，需要在自己手動建立。

那就在專案目錄下建立一個 vue.config.js 檔，並把上面那段貼上去

完成後，在 /src/plugins資料夾下面，創建一個 vuetify.js檔

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

接下來回到 src/main.js，引用vuetify

// src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from './plugins/vuetify'; // 增加這行，path to vuetify export

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  vuetify, // 增加這行
  components: { App },
  template: '<App/>',
});

好的~ 大功告成啦

明天就可以開始來規劃佈局了